<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="left" class="main-from">
    <p class="describe">
      申请人须有五年以上工作经验，并具有两年以上管理岗位工作经验。您的工作经验对于招生委员会评估您的申请十分重要。
    </p>
    <el-form-item class="space-around" label="全职工作经验" required>
      <el-form-item class="el-Small prop" prop="fullTimeYear">
        <el-input v-model="ruleForm.fullTimeYear" />
      </el-form-item>
      <span class="filling">年</span>
      <el-form-item class="el-Small prop" prop="fullTimeMoom">
        <el-input v-model="ruleForm.fullTimeMoom" />
      </el-form-item>
      <span class="filling">个月</span>
    </el-form-item>
    <el-form-item class="space-around" label="管理工作经验" required>
      <el-form-item class="el-Small position prop" prop="manageYear">
        <el-input v-model="ruleForm.manageYear" />
        <p class="hint">（截止到2022年9月）</p>
      </el-form-item>
      <span class="filling">年</span>
      <el-form-item class="el-Small prop" prop="manageMoom">
        <el-input v-model="ruleForm.manageMoom" />
      </el-form-item>
      <span class="filling">个月</span>
    </el-form-item>
    <p class="title">目前工作</p>
    <p class="describe">
      （如果您在目前的工作单位担任过多项职务，您只需提供现任的职务情况）
    </p>
    <el-form-item class="el-large" label="工作单位" required>
      <el-form-item class="prop" prop="ChineseFullName">
        <el-input v-model="ruleForm.ChineseFullName" />
        <p class="hint">（中文全称）</p>
      </el-form-item>
      <el-form-item class="combination prop" prop="englishFullName">
        <el-input v-model="ruleForm.englishFullName" />
        <p class="hint">（英文全称）</p>
      </el-form-item>
    </el-form-item>
    <el-form-item class="el-large" label="职务" required>
      <el-form-item class="prop" prop="jobTitleChineseFullName">
        <el-input v-model="ruleForm.jobTitleChineseFullName" />
        <p class="hint">（中文全称）</p>
      </el-form-item>
      <el-form-item class="combination prop" prop="jobTitleEnglishFullName">
        <el-input v-model="ruleForm.jobTitleEnglishFullName" />
        <p class="hint">（英文全称）</p>
      </el-form-item>
    </el-form-item>
    <el-form-item class="space-around" label="担任此职务年限" required>
      <el-form-item class="el-Small prop" prop="takeOfficeYear">
        <el-input v-model="ruleForm.takeOfficeYear" />
      </el-form-item>
      <span class="filling">年</span>
      <el-form-item class="el-Small prop" prop="takeOfficeMoom">
        <el-input v-model="ruleForm.takeOfficeMoom" />
      </el-form-item>
      <span class="filling">个月</span>
    </el-form-item>
    <el-form-item class="space-around" label="此单位开始工作时间" required>
      <el-form-item class="el-Small prop" prop="startWorkingYear">
        <el-input v-model="ruleForm.startWorkingYear" />
      </el-form-item>
      <span class="filling">年</span>
      <el-form-item class="el-Small prop" prop="startWorkingMoom">
        <el-input v-model="ruleForm.startWorkingMoom" />
      </el-form-item>
      <span class="filling">个月</span>
    </el-form-item>
    <el-form-item class="el-large" label="您的主要职责" prop="mainDuty">
      <el-input v-model="ruleForm.mainDuty" />
    </el-form-item>
    <el-form-item class="el-large" label="直属上司姓名" prop="bossName">
      <el-input v-model="ruleForm.bossName" />
    </el-form-item>
    <el-form-item class="el-large" label="直属上司职务" prop="bossJob">
      <el-input v-model="ruleForm.bossJob" />
    </el-form-item>
    <el-form-item class="el-large" label="直属上司联系方式" prop="BossContactInformation">
      <el-input v-model="ruleForm.BossContactInformation" />
    </el-form-item>
    <el-form-item label="是否介意直接同您的上司联系" prop="mindContact">
      <el-radio-group v-model="ruleForm.mindContact">
        <el-radio label="是"></el-radio>
        <el-radio label="否"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item class="el-large" label="您的主要工作领域" prop="fieldOfWork">
      <el-select v-model="ruleForm.fieldOfWork" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="您下属的员工人数" prop="numberOfWorkers">
      <el-input v-model="ruleForm.numberOfWorkers" />
    </el-form-item>
    <el-form-item class="el-large" label="您的职务级别" prop="jobLevel">
      <el-select v-model="ruleForm.jobLevel" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="如果您在政府部门工作，您的级别">
      <el-select v-model="ruleForm.level" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="您所在单位主要行业类别" prop="industryCategory">
      <el-select v-model="ruleForm.industryCategory" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
      <p class="hint">（金融机构需选择子类别）</p>
      <p class="hint">（若是分（子）公司，请选择分（子）公司的行业类别）</p>
    </el-form-item>
    <el-form-item class="el-large" label="您所在单位的性质" prop="natureOfTheUnit">
      <el-select v-model="ruleForm.natureOfTheUnit" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="单位网址" prop="organizationUrl">
      <el-input v-model="ruleForm.organizationUrl" />
      <p class="hint">（如果没有网址，请务必填写公司介绍）</p>
    </el-form-item>
    <el-form-item class="el-large" label="公司介绍（2000字以内）" prop="companyProfile">
      <el-input v-model="ruleForm.companyProfile" :rows="4" type="textarea" placeholder="请输入公司介绍" />
    </el-form-item>
    <el-form-item class="el-large" label="目前单位所在的国家/地区" prop="unitArea">
      <el-select v-model="ruleForm.unitArea" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="目前单位所在的省份" prop="unitProvince">
      <el-select v-model="ruleForm.unitProvince" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="目前单位所在的城市" prop="unitCity">
      <el-select v-model="ruleForm.unitCity" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="是否为上市公司" prop="listedCompany">
      <el-select v-model="ruleForm.listedCompany" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item prop="stockExchange" class="right">
      <div class="right-content">
        <span class="hint">证券交易所</span>
        <el-input v-model="ruleForm.stockExchange" />
      </div>
    </el-form-item>
    <el-form-item prop="stockCode" class="right">
      <div class="right-content">
        <span class="hint">股票代码</span>
        <el-input v-model="ruleForm.stockCode" />
      </div>
    </el-form-item>
    <el-form-item class="el-large" label="是否有上级总（母）公司">
      <el-select v-model="ruleForm.higherompany" placeholder="请选择">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item class="el-large" label="总（母）公司名称">
      <div>
        <el-input v-model="ruleForm.chineseHigherompanyName" />
        <p class="hint">（中文全称）</p>
      </div>
      <div class="combination">
        <el-input v-model="ruleForm.englishHigherompanyName" />
        <p class="hint">（英文全称）</p>
      </div>
    </el-form-item>
    <el-form-item prop="profit">
      <p class="hint">
        请提供申请人单位主要财务数据，年销售收入和年利润为必填，以百万计
        <span class="red">*</span>
      </p>
      <div class="right-input-content">
        <el-radio-group v-model="ruleForm.profit">
          <el-radio label="人民币"></el-radio>
          <el-radio label="欧元"></el-radio>
          <el-radio label="美元"></el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
    <div class="sheet">
      <ul class="sheet-name">
        <li></li>
        <li v-for="item in listKey" :key="item.id">
          <p>{{ item.text }}</p>
          <p>{{ item.unit }}</p>
        </li>
      </ul>
      <ul class="sheet-content" v-for="item in list" :key="item.title">
        <li>
          <p v-html="item.title"></p>
        </li>
        <li v-for="(child, index) in item.data" :key="index">
          <el-input v-if="child.type == 'input'" v-model="child.value" />
          <el-select v-else v-model="child.value" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </li>

      </ul>
    </div>
    <el-form-item class="el-large maxwidth">
      <p class="hint">如果您的公司是合资公司，请列出投资方及投资比例</p>
      <div class="right-input-content">
        <el-input v-model="ruleForm.chineseInvestmentRatio" />
        <p class="hint">（中文全称）</p>
      </div>
      <div class="right-input-content">
        <el-input v-model="ruleForm.EnglishInvestmentRatio" />
        <p class="hint">（英文全称）</p>
      </div>
    </el-form-item>
    <div class="footer-but">
      <el-button type="primary" @click="saveForm('ruleFormRef')">保存</el-button>
      <el-button type="info" @click="resetForm('ruleFormRef')">重置</el-button>
    </div>
  </el-form>
</template> 

<script>
import rules from "@/util/rules.js";
export default {
  name: "work", //目前工作
  props: {},
  data() {
    return {
      ruleForm: {},
      rules: rules,
      listKey: [
        {
          text: '总资产',
          unit: '（百万）',
          id: 1
        },
        {
          text: '年销售收入',
          unit: '（百万）',
          id: 2
        },
        {
          text: '年所得税缴纳额',
          unit: '（百万）',
          id: 3
        },
        {
          text: '年利润',
          unit: '（百万）',
          id: 4
        },
        {
          text: '员工人数',
          unit: '',
          id: 5
        },
      ],
      list: [
        {
          title: '申请人所在单位',
          data: [
            {
              value: '',
              type: 'input'
            },
            {
              value: '',
              type: 'input'
            },
            {
              value: '',
              type: 'input'
            },
            {
              value: '',
              type: 'input'
            },
            {
              value: '',
              type: 'select'
            },
          ]
        },
        {
          title: '申请人所在单位的<br/>上级总（母）公司',
          data: [
            {
              value: '',
              type: 'input'
            },
            {
              value: '',
              type: 'input'
            },
            {
              value: '',
              type: 'input'
            },
            {
              value: '',
              type: 'input'
            },
            {
              value: '',
              type: 'input'
            },
          ]
        }
      ]
    };

  },
  methods: {
    saveForm(formName) {
      console.log("保存");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      (this.ruleForm = {}), this.$refs[formName].resetFields();
    },
  },
  components: {},
};
</script>


<style scoped lang="scss">
.main-from {
  overflow: hidden;

  .describe {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5a5a5a;
    line-height: 30px;
    margin-bottom: 30px;
  }

  .title {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #003963;
    margin: 60px 0 30px;
  }

  .secondary-title {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    margin: 50px 0 30px;
  }

  .position {
    position: relative;

    .hint {
      width: 159px;
      position: absolute;
      bottom: -32px;
      left: 0;
    }
  }

  .hint {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5a5a5a;
  }

  .right {
    ::v-deep .el-form-item__error {
      left: auto;
      right: -65px;
    }
  }

  .right-content {
    margin-left: 268px;
    width: 412px;
    display: flex;

    span {
      flex: 1;
    }

    ::v-deep .el-input .el-input__inner {
      width: 280px;
      height: 42px;
    }
  }

  .right-input-content {
    margin-top: 10px;
    margin-left: 268px;
  }

  .combination {
    margin-top: 15px;
  }

  .sheet {
    width: 682px;
    background: #f0f5fa;
    display: flex;
    justify-content: space-around;
    padding-top: 5px;
    margin-bottom: 42px;
    margin-top: 41px;

    ul {
      li {
        height: 53px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;

        p {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #5a5a5a;
        }
      }
    }

    .sheet-name {
      width: 146px;
    }

    .sheet-content {
      width: 228px;

      li {
        ::v-deep .el-input .el-input__inner {
          width: 206px;
          height: 53px;
        }

        ::v-deep .el-select .el-input__wrapper .el-input__inner {
          width: 186px;
          height: 53px;
        }
      }
    }
  }

  .prop {
    ::v-deep .el-form-item__content {
      width: auto;
      display: block;
    }
  }

  .footer-but {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;

    ::v-deep .el-button {
      width: 250px;
      height: 55px;
      margin: 30px 22.5px;
    }
  }
}

@media (max-width: 768px) {
  .main-from {
    .describe {
      font-size: 14px;
    }

    .title {
      font-size: 16px;
      margin: 60px 0 30px;
    }

    .secondary-title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #000000;
      margin: 50px 0 30px;
    }

    .position {
      position: relative;

      .hint {
        width: 159px;
        position: absolute;
        bottom: -32px;
        left: 0;
        z-index: 1000;
      }
    }

    .hint {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5a5a5a;
    }

    .right-content {
      margin-left: 50%;
      width: 99%;

      span {
        flex: auto;
        display: inline-block;
        width: 100px;
      }

      ::v-deep .el-input .el-input__inner {
        width: 100%;
        height: 28px;
      }
    }

    .right-input-content {
      width: 100%;
      margin-left: 0%;

      ::v-deep .el-form-item__content {
        width: 100%;
      }
    }

    .sheet {
      width: 100%;
      background: #f0f5fa;
      display: flex;
      justify-content: space-around;
      padding-top: 5px;
      margin-bottom: 42px;
      margin-top: 41px;

      ul {
        li {
          height: 40px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: 18px;

          p {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #5a5a5a;
          }
        }
      }

      .sheet-name {
        width: 30%;
      }

      .sheet-content {
        width: 30%;

        li {
          ::v-deep .el-input .el-input__inner {
            // width: 76px;
            width: 100%;
            height: 28px;
          }

          ::v-deep .el-select .el-input__wrapper .el-input__inner {
            // width: 56px;
            width: 100%;

            height: 28px;
          }
        }
      }
    }

    .footer-but {
      ::v-deep .el-button {
        width: 125px;
        height: 40px;
        margin: 31px 22.5px;
        font-size: 16px;
      }
    }
  }
}
</style>
